.input {
    box-sizing: border-box;
    width: 100%;
    color: rgb(var(--text-color));

    &::selection {
        color: rgb(var(--color-white));
        background-color: rgb(var(--primary-color));
    }

    // &-out-of-range {
    //     color: rgb(var(--error-color));
    // }

    &-affix-wrapper {
        position: relative;

        overflow: hidden;

        box-sizing: border-box;

        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-base);

        transition: all 0.15s;

        &-small {
            height: 24px;
            display: inline-flex;
            align-items: center;
            padding: 0 10px;
            font-size: var(--font-size-sm);
        }

        &-middle {
            height: 28px;
            display: inline-flex;
            align-items: center;
            padding: 0 10px;
            font-size: var(--font-size-sm);
        }

        &-large {
            height: 32px;
            display: inline-flex;
            align-items: center;
            padding: 0 10px;
            font-size: var(--font-size-sm);
        }

        &:hover,
        &:focus-within {
            border-color: rgb(var(--primary-color));
        }

        &-disabled {
            cursor: not-allowed;
            border-color: rgb(var(--border-color));

            &:hover {
                border-color: rgb(var(--border-color));
            }
        }

        input {
            padding: 0;
            border: none;
            outline: none;

            background-color: rgb(var(--bg-color-secondary));

            &[disabled] {
                cursor: inherit;
                color: rgb(var(--grey-200));
                background-color: rgb(var(--bg-color-secondary));
            }
        }
    }

    &-suffix {
        position: absolute;
        top: 0;
        right: 2px;

        display: flex;
        align-items: center;

        height: 100%;
        padding: 0 var(--padding-sm);

        background-color: rgb(var(--bg-color-secondary));
    }

    &-not-allow-clear {
        .input-suffix {
            padding: 0;
        }
    }

    &-clear-icon {
        cursor: pointer;
        display: inline-flex;
        align-items: center;

        &-hidden {
            display: none;
        }
    }

    &-slot-container {
        position: relative;
        display: flex;

        > span {
            width: 100%;
        }
    }

    &-slot {
        position: absolute;
        top: 0;
        right: 8px;

        display: inline-flex;

        height: 100%;
    }
}
